/*!
 * Start Bootstrap - Freelancer Bootstrap Theme (http://startbootstrap.com)
 * Code licensed under the Apache License v2.0.
 * For details, see http://www.apache.org/licenses/LICENSE-2.0.
 */

$primary-color: #3E8ACC;
$color-clear-blue: #91d5fb;
$color-blue: #3E8ACC;
$dark-blue: #09486b;
body {
    overflow-x: hidden;
}

p {
    font-size: 20px;
    &.small {
        font-size: 16px;
    }
}

a {
    outline: 0;
    color: $primary-color;
    &:hover,
    &:focus,
    &:active,
    &.active {
        outline: 0;
        color: $primary-color;
    }
}

h1,
h2,
h3,
h4,
h5,
h6 {
    text-transform: capitalize;
    font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 700;
}

hr {
    &.star-light,
    &.star-primary {
        margin: 30px auto 30px;
        padding: 0;
        max-width: 250px;
        border: 0;
        border-top: solid 5px;
        text-align: center;
    }
    &.star-light:after,
    &.star-primary:after {
        content: "\f005";
        display: inline-block;
        position: relative;
        top: -.8em;
        padding: 0 .25em;
        font-family: FontAwesome;
        font-size: 2em;
    }
    &.star-light {
        border-color: #fff;
        &:after {
            color: #fff;
            background-color: $primary-color;
        }
    }
    &.star-primary {
        border-color: #2c3e50;
        &:after {
            color: #2c3e50;
            background-color: #F9F9F9;
        }
    }
}

.img-centered {
    margin: 0 auto;
}

header {
    text-align: center;
    color: #fff;
    background: $primary-color;
    .card {
        .card-body {
            text-align: left;
        }
        &.summary-inline {
            .card-body {
                padding: 10px;
                .content {
                    .title {
                        font-size: 2em;
                    }
                }
            }
        }
    }
    .container {
        padding-top: 100px;
        padding-bottom: 50px;
        .logo-big {
            outline: white;
            max-width: 360px;
            width: 100%;
            background: #fff;
            border-radius: 100%;
            max-height: 360px;
            height: 100%;
            padding: 15px;
            margin: 0 auto;
        }
        .brand {
            font-size: 5em;
            text-transform: capitalize;
        }
        .stats {
            margin-top: 80px;
        }
    }
    img {
        display: block;
        margin: 0 auto 20px;
    }
    .intro-text {
        .name {
            display: block;
            text-transform: uppercase;
            font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;
            font-size: 2em;
            font-weight: 700;
        }
        .skills {
            font-size: 1.25em;
            font-weight: 300;
        }
    }
}

@media (min-width: 768px) {
    header {
        .container {
            padding-top: 100px;
            padding-bottom: 50px;
        }
        .intro-text {
            .name {
                font-size: 4.75em;
            }
            .skills {
                font-size: 1.75em;
            }
        }
    }
}

@media (min-width: 768px) {
    .navbar-fixed-top {
        -webkit-transition: padding .3s;
        -moz-transition: padding .3s;
        transition: padding .3s;
        .navbar-brand {
            font-size: 2em;
            -webkit-transition: all .3s;
            -moz-transition: all .3s;
            transition: all .3s;
        }
        &.navbar-shrink {
            padding: 10px 0;
            .navbar-brand {
                font-size: 1.5em;
            }
        }
    }
}

.navbar-top.navbar {
    text-transform: uppercase;
    font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 700;
    a:focus {
        outline: 0;
    }
    .navbar-nav {
        letter-spacing: 1px;
        li a:focus {
            outline: 0;
        }
    }
}

.navbar-default,
.navbar-inverse {
    border: 0;
}

input.search-text {
    color: #fff;
}

section {
    padding: 100px 0;
    h2 {
        margin: 0;
        font-size: 3em;
    }
    &.news {
        padding: 10px 0;
    }
    &.success {
        color: #fff;
        background: $primary-color;
        a {
            outline: 0;
            color: #2c3e50;
            &:hover,
            &:focus,
            &:active,
            &.active {
                outline: 0;
                color: #2c3e50;
            }
        }
    }
    .title {
        padding: 15px;
        .head-icons {
            margin: 0 0 20px;
            a {
                display: inline-block;
                vertical-align: top;
            }
        }
    }
    ul {
        font-size: 1.2em;
    }
    .brand {
        margin-bottom: 15px;
    }
    .card {
        margin-bottom: 5px;
        .card-body {
            text-align: left;
        }
        &.module.summary-inline {
            .card-body {
                padding: 10px;
                .content {
                    width: 75%;
                    .title {
                        font-size: 1.5em;
                    }
                    .sub-title {
                        margin: 10px 0;
                    }
                }
            }
        }
    }
}

@media (max-width: 767px) {
    section {
        padding: 75px 0;
        &.first {
            padding-top: 75px;
        }
    }
}

.stack-container {
    margin-bottom: 50px;
}

.stacks {
    margin: 0 auto;
    list-style: none;
    padding: 0px 100px 0 100px;
    max-width: 1200px;
    .clip {
        margin: 5px;
        width: 150px;
        height: 150px;
        background-color: $dark-blue;
        border: 1px solid $dark-blue;
        color: white;
        float: left;
        text-align: center;
        &.img-circle {
            webkit-border-radius: 500px;
            -moz-border-radius: 500px;
            border-radius: 500px;
        }
        i {
            display: block;
            padding-top: 25px;
            font-size: 4.8em;
        }
        img {
            padding-top: 25px;
            display: block;
            margin: 0 auto;
            height: 100px;
            -webkit-filter: grayscale(100%) brightness(1.5);
            filter: grayscale(100%) brightness(1.5);
            &.height {
                height: 100px;
                width: auto;
            }
            &.width {
                height: auto;
                width: 100px;
                margin: 28px auto;
            }
            &.white {
                -webkit-filter: grayscale(100%) brightness(1.5);
                filter: grayscale(100%) brightness(1.5);
            }
            &.white-inv {
                -webkit-filter: grayscale(100%) brightness(1.5) invert(100%);
                filter: grayscale(100%) brightness(1.5) invert(100%);
            }
            &.invert {
                -webkit-filter: invert(100%);
                filter: invert(100%);
            }
            &.saturate {
                -webkit-filter: saturate(3);
                filter: saturate(3);
            }
            &.grayscale {
                -webkit-filter: grayscale(100%);
                filter: grayscale(100%);
            }
            &.brightness {
                -webkit-filter: brightness(0.25);
                filter: brightness(0.25);
            }
            &.contrast {
                -webkit-filter: contrast(160%);
                filter: contrast(160%);
            }
        }
        .title_sub_tech {
            margin-top: 5px;
            font-size: 13px;
            color: white;
            display: block;
            text-align: center;
        }
        &:hover {
            background-color: white;
            border: 1px solid white;
            
            img {
                -webkit-filter: none;
                filter: none;
                &.invert-hover{
                    -webkit-filter: invert(100%);
                    filter: invert(100%);
                }
            }
            .title_sub_tech {
                color: $dark-blue;
            }
        }
        
    }
}

.floating-label-form-group {
    position: relative;
    margin-bottom: 0;
    padding-bottom: .5em;
    border-bottom: 1px solid #eee;
    input,
    textarea {
        z-index: 1;
        position: relative;
        padding-right: 0;
        padding-left: 0;
        border: 0;
        border-radius: 0;
        font-size: 1.5em;
        background: 0 0;
        box-shadow: none !important;
        resize: none;
    }
    label {
        display: block;
        z-index: 0;
        position: relative;
        top: 2em;
        margin: 0;
        font-size: .85em;
        line-height: 1.764705882em;
        vertical-align: middle;
        vertical-align: baseline;
        opacity: 0;
        -webkit-transition: top .3s ease, opacity .3s ease;
        -moz-transition: top .3s ease, opacity .3s ease;
        -ms-transition: top .3s ease, opacity .3s ease;
        transition: top .3s ease, opacity .3s ease;
    }
}

.floating-label-form-group-with-value label {
    top: 0;
    opacity: 1;
}

.floating-label-form-group-with-focus label {
    color: $primary-color;
}

form .row:first-child .floating-label-form-group {
    border-top: 1px solid #eee;
}

.fontSmall {
   font-size: 1em; 
}